<template>
  <div class="z-table_com">
    <div class="z-table_head">
      <slot name="actions_add">
        <div class="action_create">
          <a-button type="primary">创建</a-button>
        </div>
      </slot>
      <div class="actions_group">
        <a-select placeholder="操作">
          <a-select-option value="1">1</a-select-option>
        </a-select>
      </div>
      <div class="action_search">
        <a-input-search
          placeholder="请输入搜索内容"
          v-model="params.key"
          @search="handleSearch"
        />
      </div>
      <div class="action_search_slot"></div>
      <div class="action_refresh">
        <icon-refresh />
      </div>
    </div>
    <div class="z-body">
      <a-spin :loading="loading" :tip="'加载中...'">
        <div class="z-table_warp">
          <a-table
            :row-key="rowKey"
            :data="data.list"
            :row-selection="noCheck ? rowSelection : undefined"
            v-model:selectedKeys="selectedKeys"
          >
            <template #columns>
              <template v-for="col in columns">
                <a-table-column
                  v-if="col.dataIndex"
                  v-bind="col"
                ></a-table-column>

                <a-table-column v-else-if="col.slotName" v-bind="col">
                  <template #cell="row">
                    <div class="col_actions" v-if="col.slotName === 'actions'">
                      <slot name="actions_left" v-bind="row"></slot>
                      <a-button type="primary" @click="updateRow(row.record)"
                        >编辑</a-button
                      >

                      <a-popconfirm
                        @ok="removeRow(row.record)"
                        content="确定要删除该条记录吗?"
                      >
                        <a-button type="primary" status="danger">删除</a-button>
                      </a-popconfirm>

                      <slot name="actions_right" v-bind="row"></slot>
                    </div>

                    <div v-if="col.slotName === 'created_at'" v-bind="row">
                      {{ formatDate(row.record.created_at, col.format) }}
                    </div>
                    <div v-if="col.slotName === 'current'" v-bind="row">
                      {{ dateCurrentFromNow(row.record.created_at) }}
                    </div>
                    <slot :name="col.slotName" v-bind="row"></slot>
                  </template>
                </a-table-column>
              </template>
            </template>
          </a-table>
        </div>
        <div class="z-table_page">
          <a-pagination
            :total="data.count"
            v-model:current="params.page"
            :page-size="params.limit"
            show-page-size
            @change="pageChange"
          />
        </div>
      </a-spin>
    </div>
  </div>
</template>

<script lang="ts" setup>
interface Props {
  url: (params?: ParamsType) => Promise<BaseResponse<ListResponse<any>>>;
  columns: ColumnType[];
  rowKey: string;
  noCheck?: boolean;
}

import type {
  BaseResponse,
  ColumnType,
  ListResponse,
  ParamsType,
} from "@/types/common";
import type { TableColumnData, TableRowSelection } from "@arco-design/web-vue";
import { ref, reactive } from "vue";
import { dateCurrentFromNow, formatDate } from "@/utils/date";

const loading = ref(false);
const props = defineProps<Props>();
const data = reactive<ListResponse<any>>({
  list: [],
  count: 0,
});
const params = reactive<ParamsType>({
  limit: 10,
  page: 1,
});

const selectedKeys = ref(["Jane Doe", "Alisa Ross"]);

const rowSelection = reactive<TableRowSelection>({
  type: "checkbox",
  showCheckedAll: true,
  onlyCurrent: false,
});

const getList = async () => {
  loading.value = true;
  const {
    data: { list, count },
  } = await props.url(params);
  data.list = list || [];
  data.count = count;
  loading.value = false;
};

getList();

const pageChange = (page: number) => {
  params.page = page;
  getList();
};

const handleSearch = () => {
  getList();
};

const updateRow = (row: TableColumnData) => {
  console.log("updateRow", row);
};
const removeRow = (row: TableColumnData) => {
  console.log("removeRow", row);
};
</script>
<style scoped lang="less">
.z-table_com {
  .z-table_head {
    display: flex;
    align-items: center;
    padding: 20px 20px 10px;
    border-bottom: @z-border;
    position: relative;
    .action_create,
    .actions_group,
    .action_search,
    .action_search_slot {
      margin-right: 10px;
    }
    .action_refresh {
      position: absolute;
      right: 20px;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--color-fill-2);
      border-radius: 5px;
      cursor: pointer;
    }
  }
  .z-body {
    padding: 10px 20px 20px;
    > .arco-spin {
      width: 100%;
    }

    .col_actions {
      :deep(button) {
        margin-right: 10px !important;
        &:nth-last-child(1) {
          margin-right: 0;
        }
      }
    }

    .z-table_page {
      display: flex;
      justify-content: center;
      margin-top: 10px;
    }
  }
}
</style>
